<template>
  <div>
    <section class="main">
      <div class="banner">
        <p class="title">欢迎登录中酒云网中后台</p>
        <p class="btn">智慧华云</p>
      </div>
      <div class="con">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>账户概要</span>
        </p>
        <div class="summary">
          <div class="left">
            <div class="left_con">
              <div class="con_content_left">用户名称</div>
              <div class="con_content_right">
                <span>{{ userInfo.userName }}</span>
              </div>
            </div>
            <div class="left_con">
              <div class="con_content_left">证件号码</div>
              <div class="con_content_right">
                <span>{{ userInfo.number || "-" }}</span>
              </div>
            </div>
            <div class="left_con">
              <div class="con_content_left">用户类型</div>
              <div class="con_content_right">
                <span>{{ userInfo.userType == "02" ? "公司" : "个人" }}</span>
              </div>
            </div>
            <div class="left_con">
              <div class="con_content_left">账户余额</div>
              <div class="con_content_lastRight">
                <span>¥{{ userInfo.userWallet || 0 }}元</span>
                <el-link @click="handleRecharge">充值</el-link>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="top">
              <div class="top_left">
                <div class="top_leftItem">
                  <div class="top_leftItem_left">是否认证</div>
                  <div class="top_leftItem_right">
                    <span>{{ isAuthentication(userInfo.authentication) }}</span>
                    <el-link
                      style="margin-left: 10px"
                      v-if="userInfo.authentication == 2"
                      @click="handleAuthentication"
                    >
                      <!-- {{ userInfo.authentication == 0 ? '立即认证' : '重新认证' }} -->
                      {{ '重新认证' }}
                    </el-link>
                  </div>
                </div>
                <div class="top_leftItem">
                  <div class="top_leftItem_left">手机号码</div>
                  <div class="top_leftItem_right">
                    <span>{{ userInfo.phonenumber }}</span>
                  </div>
                </div>
                <div class="top_leftItem">
                  <div class="top_leftItem_left">微信</div>
                  <div class="top_leftItem_right">
                    <span>{{ userInfo.wechatOpenId ? "已绑定" : "未绑定" }}</span>
                    <el-link style="margin-left: 10px" @click="handleWechat">
                      {{ userInfo.wechatOpenId ? "解绑" : "去绑定" }}
                    </el-link>
                  </div>
                </div>
              </div>
              <div class="top_right">
                <div class="top_rightItem">
                  <div class="top_rightItem_left">证件类型</div>
                  <div class="top_rightItem_right">
                    <span>{{ userInfo.userType == "02" ? "营业执照" : "身份证" }}</span>
                  </div>
                </div>
                <div class="top_rightItem">
                  <div class="top_rightItem_left">电子邮箱</div>
                  <div class="top_rightItem_right">
                    <span>{{ userInfo.email }}</span>
                  </div>
                </div>
                <div class="top_rightItem">
                  <div class="top_rightItem_left"></div>
                  <div class="top_rightItem_right"></div>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="bottom_left">其他</div>
              <div class="bottom_lastRight">
                <el-button class="Rightbtn" @click="handleAaaply('invoice')">
                  发票索取
                </el-button>
                <el-button class="Rightbtn" @click="handleEdit">信息修改</el-button>
                <el-button class="Rightbtn" @click="handleAaaply('contract')">
                  申请合同
                </el-button>
                <el-button class="Rightbtn" @click="handlePassword">密码修改</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="give">
        <p class="con-title">
          <span>
            <img src="@/assets/img/control/content/Group769.png" />
          </span>
          <span>服务概要</span>
        </p>
        <div class="giveCon">
          <div class="giveLeft">
            <div class="giveLeft_left">政务云</div>
            <div class="giveLeft_right_first">
              <span v-if="userInfo.govCloudNum != 0">{{ userInfo.govCloudNum || 0 }}</span>
              <a v-else href="/#/client/cloudGovernment">
                立即购买
              </a>
            </div>
          </div>
          <div class="giveLeft">
            <div class="giveLeft_left">云服务器</div>
            <div class="giveLeft_right">
              <span v-if="userInfo.cloudServerNum != 0">{{ userInfo.cloudServerNum || 0 }}</span>
              <a v-else style="color: #157dfa;" href="/#/client/cloudService">
                立即购买
              </a>
            </div>
          </div>
          <div class="giveLeft">
            <div class="giveLeft_left">云市场</div>
            <div class="giveLeft_right">
              <span v-if="userInfo.cloudMarketNum != 0">{{ userInfo.cloudMarketNum || 0 }}</span>
              <a v-else style="color: #157dfa;" href="/#/client/cloudMarketplace">
                立即购买
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Apply-dialog v-model:show="actionShow" :action="action" />
    <Update-dialog v-model:show="editShow" :form="editForm" @change="getUser" />
    <Author-dialog v-model:show="authorShow" :userType="userInfo.userType == '01' ? 1 : 2" :authentication="userInfo.authentication"/>
    <Password-dialog v-model:show="passwordShow" />
    <Wechat-dialog  v-model:show="wechatShow" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import ApplyDialog from "./ApplyDialog.vue";
import UpdateDialog from "./UpdateDialog.vue";
import AuthorDialog from "./AuthorDialog.vue";
import PasswordDialog from "./PasswordDialog.vue";
import WechatDialog from "./WechatDialog.vue";
import { getUserInfo, unbindWechat } from "@/api/loginApi";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();

const userInfo = ref<any>({}); // 用户信息

const actionShow = ref(false); // 申请弹窗
const action = ref("invoice"); // 申请操作

const editShow = ref(false); // 编辑弹窗
const editForm = ref<any>({}); // 编辑表单

const wechatShow = ref(false); // 微信绑定弹窗
const authorShow = ref(false); // 认证弹窗
const passwordShow = ref(false); // 密码修改

onMounted(() => {
  getUser();
});


//是否认证
const isAuthentication = (val: number) => {
  if (0 === val) {
    return '未认证';
  } else if (1 === val) {
    return '已认证';
  }else if (2 === val) {
    return '认证失败';
  }else if (3 === val) {
    return '认证中';
  }
}
// 获取用户信息
const getUser = () => {
  getUserInfo().then((res: any) => {
    userInfo.value = res.data;
  });
};

// 绑定微信
const handleWechat = () => {
  let openid = userInfo.value.wechatOpenId;
  if (openid) {
    // 解绑
    ElMessageBox.confirm("确认解除微信绑定吗?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        let data = {
          userId: userInfo.value.userId,
        };
        unbindWechat(data).then(() => {
          ElMessage.success("解绑成功");
          getUser();
        });
      })
      .catch(() => {});
  } else {
    // 去绑定
    wechatShow.value = true;
  }
};

// 编辑
const handleEdit = () => {
  const { email, phonenumber, nickName } = userInfo.value;
  editForm.value = {
    email,
    phonenumber,
    nickName,
  };
  editShow.value = !editShow.value;
};

// 余额充值
const handleRecharge = () => {
  router.push("/control/recharge/myRecharge");
};

// 打开弹窗
const handleAaaply = (val: any) => {
  if (val == "contract") {
    router.push({
      path: "/control/financialAfterSale/contractors",
    });
  } else {
    action.value = val;
    actionShow.value = true;
  }
};

// 立即认证
const handleAuthentication = () => {
  authorShow.value = true;
};

// 密码修改
const handlePassword = () => {
  passwordShow.value = true;
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  .banner {
    width: 100%;
    height: 346px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 60px 0 110px 80px;
    background: url("@/assets/img/control/content/image55.png") no-repeat center center /
      100% 100%;
    .title {
      font-size: 60px;
      color: #1e82fa;
      font-weight: 600;
    }
    .btn {
      width: 178px;
      height: 54px;
      text-align: center;
      background: rgba(21, 125, 250, 0.1);
      border: 1px dashed #1e85fa;
      line-height: 54px;
      font-size: 28px;
      color: #157dfa;
    }
  }
  .con {
    width: 100%;
    height: auto;
    .con-title {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      margin: 20px 0;
      span:nth-child(1) {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
        }
      }
      span:nth-child(2) {
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 16px;
      }
    }
    .summary {
      width: 100%;
      height: 292px;
      display: flex;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        .left_con {
          flex: 1;
          display: flex;
          .con_content_left {
            flex: 1;
            border: 1px solid rgba(242, 242, 242, 1);
            display: flex;
            background: rgba(246, 250, 255, 1);
            align-items: center;
            justify-content: center;
          }
          .con_content_right {
            flex: 2;
            display: flex;
            border: 1px solid rgba(242, 242, 242, 1);
            align-items: center;
            justify-content: center;
          }
          .con_content_lastRight {
            flex: 2;
            display: flex;
            align-items: center;
            border: 1px solid rgba(242, 242, 242, 1);
            justify-content: space-evenly;
            a {
              color: #157dfa;
            }
          }
        }
      }
      .right {
        flex: 2;
        display: flex;
        flex-direction: column;
        .top {
          flex: 3;
          display: flex;
          .top_left {
            flex: 1;
            display: flex;
            flex-direction: column;
            .top_leftItem {
              flex: 1;
              display: flex;
              .top_leftItem_left {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(246, 250, 255, 1);
                border: 1px solid rgba(242, 242, 242, 1);
              }
              .top_leftItem_right {
                flex: 2;
                display: flex;
                border: 1px solid rgba(242, 242, 242, 1);
                align-items: center;
                justify-content: center;
                a {
                  color: #157dfa;
                }
              }
            }
          }
          .top_right {
            flex: 1;
            display: flex;
            flex-direction: column;
            .top_rightItem {
              flex: 1;
              display: flex;
              .top_rightItem_left {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(246, 250, 255, 1);
                border: 1px solid rgba(242, 242, 242, 1);
              }
              .top_rightItem_right {
                flex: 2;
                display: flex;
                border: 1px solid rgba(242, 242, 242, 1);
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
        .bottom {
          flex: 1;
          display: flex;
          .bottom_left {
            flex: 1;
            display: flex;
            background: rgba(246, 250, 255, 1);
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(242, 242, 242, 1);
          }
          .bottom_right {
            flex: 5;
            display: flex;
            align-items: center;
            border: 1px solid rgba(242, 242, 242, 1);
            justify-content: center;
          }
          .bottom_lastRight {
            flex: 5;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            border: 1px solid rgba(242, 242, 242, 1);
            .Rightbtn {
              color: #157dfa;
              background: rgba(246, 250, 255, 1);
              border: none;
              width: 120px;
              height: 48px;
            }
            .Rightbtn:hover {
              color: #ffffff;
              background: rgba(30, 130, 250, 0.5);
            }
          }
        }
      }
    }
  }
  .give {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    .giveCon {
      flex: 1;
      display: flex;
      .giveLeft {
        flex: 1;
        display: flex;
        .giveLeft_left {
          flex: 1;
          border: 1px solid rgba(242, 242, 242, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(246, 250, 255, 1);
        }
        .giveLeft_right_first {
          flex: 2;
          display: flex;
          justify-content: space-evenly;
          border: 1px solid rgba(242, 242, 242, 1);
          align-items: center;
          a {
            color: #157dfa;
          }
        }
        .giveLeft_right {
          flex: 2;
          display: flex;
          justify-content: center;
          border: 1px solid rgba(242, 242, 242, 1);
          align-items: center;
        }
      }
    }
  }
}
</style>
